import {
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
} from 'react-native';
import React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';

const MySreen = () => {
  // 用户个人信息数据
  const userInfo = {
    avatar:
      'https://2403a.oss-cn-beijing.aliyuncs.com/2025/09/01/ad6b68a2c7b342378cba32d2c3b434feic_floor14.png',
    username: 'alsothank',
    studyTime: '1196小时',
    experience: 11716,
    followers: 1,
    following: 4,
    points: 20,
    balance: '63.23元',
  };

  const imageSrc = {
    // 购物车图标路径
    shopCar: require('../../static/my/gouwuce.png'),
    // 工作图标路径
    work: require('../../static/my/renwu.png'),
    // 订单图标路径
    order: require('../../static/my/dingdan.png'),
    // 余额图标路径
    balance: require('../../static/my/yue.png'),
    // 兑换码图标路径
    code: require('../../static/my/zhihuan.png'),
    // 优惠券图标路径
    coupon: require('../../static/my/youhui.png'),
    // 拼团图标路径
    group: require('../../static/my/pengyou.png'),
    // 企业图标路径
    enterprise: require('../../static/my/qiye.png'),
    // 反馈图标路径
    feedback: require('../../static/my/fankui.png'),
    // 帮助图标路径
    help: require('../../static/my/bangzhu.png'),
  };

  // 功能列表数据
  const features = [
    {
      id: '1',
      title: '购物车',
      icon: imageSrc.shopCar,
      badge: 2,
    },
    {
      id: '2',
      title: '任务中心',
      icon: imageSrc.work,
      badge: 0,
    },
    {
      id: '3',
      title: '我的订单',
      icon: imageSrc.order,
      badge: 0,
    },
    {
      id: '4',
      title: '我的余额',
      icon: imageSrc.balance,
      badge: 0,
      showValue: true,
    },
    {
      id: '5',
      title: '电子兑换码',
      icon: imageSrc.code,
      badge: 0,
    },
    {
      id: '6',
      title: '我的优惠券',
      icon: imageSrc.coupon,
      badge: 0,
    },
    {
      id: '7',
      title: '我的拼团',
      icon: imageSrc.group,
      badge: 0,
    },
    {
      id: '8',
      title: '企业服务',
      icon: imageSrc.enterprise,
      badge: 0,
    },
    {
      id: '9',
      title: '意见反馈',
      icon: imageSrc.feedback,
      badge: 0,
    },
    {
      id: '10',
      title: '帮助中心',
      icon: imageSrc.help,
      badge: 0,
      description: '遇到问题先来这里看看',
    },
  ];

  return (
    <View style={styles.container}>
      <ScrollView
        style={styles.scrollView}
        showsVerticalScrollIndicator={false}
      >
        {/* 用户信息头部 */}
        <View style={styles.header}>
          <View style={styles.userInfoContainer}>
            <Image source={{ uri: userInfo.avatar }} style={styles.avatar} />
            <View style={styles.userInfo}>
              <View style={styles.userNameRow}>
                <Text style={styles.username}>{userInfo.username}</Text>
                <Image
                  source={{
                    uri: 'https://img.alicdn.com/imgextra/i2/O1CN01kG8b1r3o4oZq2bF_!!6000000005933-2-tps-16-16.png',
                  }}
                  style={styles.verifiedIcon}
                />
              </View>
              <Text style={styles.userStats}>
                学习时长 {userInfo.studyTime} 经验 {userInfo.experience}
              </Text>
            </View>
          </View>

          {/* 统计数据 */}
          <View style={styles.statsContainer}>
            <View style={styles.statItem}>
              <Text style={styles.statValue}>{userInfo.followers}</Text>
              <Text style={styles.statLabel}>粉丝</Text>
            </View>
            <View style={styles.statItem}>
              <Text style={styles.statValue}>{userInfo.following}</Text>
              <Text style={styles.statLabel}>关注</Text>
            </View>
            <View style={styles.statItem}>
              <Text style={styles.statValue}>{userInfo.points}</Text>
              <Text style={styles.statLabel}>积分</Text>
            </View>
          </View>
        </View>

        {/* 功能列表 */}
        <View style={styles.featuresContainer}>
          {features.map(feature => (
            <TouchableOpacity
              key={feature.id}
              style={styles.featureItem}
              activeOpacity={0.7}
            >
              <View style={styles.featureLeft}>
                <Image source={feature.icon} style={styles.featureIcon} />
                <Text style={styles.featureTitle}>{feature.title}</Text>
                {feature.showValue && (
                  <Text style={styles.balanceValue}>{userInfo.balance}</Text>
                )}
              </View>

              <View style={styles.featureRight}>
                {feature.badge > 0 && (
                  <View style={styles.badge}>
                    <Text style={styles.badgeText}>{feature.badge}</Text>
                  </View>
                )}
                {feature.description && (
                  <Text style={styles.featureDescription}>
                    {feature.description}
                  </Text>
                )}
                <Image
                  source={{
                    uri: 'https://img.alicdn.com/imgextra/i3/O1CN01W1qZ3b1r3o4oZq2bT_!!6000000005933-2-tps-16-16.png',
                  }}
                  style={styles.arrowIcon}
                />
              </View>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollView: {
    flex: 1,
  },
  header: {
    backgroundColor: '#fff',
    padding: 16,
    marginBottom: 10,
  },
  userInfoContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },
  avatar: {
    width: 64,
    height: 64,
    borderRadius: 32,
    marginRight: 12,
  },
  userInfo: {
    flex: 1,
  },
  userNameRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 4,
  },
  username: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  verifiedIcon: {
    width: 16,
    height: 16,
    marginLeft: 4,
  },
  userStats: {
    fontSize: 14,
    color: '#999',
  },
  statsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 8,
  },
  statItem: {
    alignItems: 'center',
    flex: 1,
  },
  statValue: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 4,
  },
  statLabel: {
    fontSize: 14,
    color: '#999',
  },
  featuresContainer: {
    backgroundColor: '#fff',
  },
  featureItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  featureLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  featureIcon: {
    width: 24,
    height: 24,
    marginRight: 12,
  },
  featureTitle: {
    fontSize: 16,
    color: '#333',
  },
  balanceValue: {
    fontSize: 16,
    color: '#ff6b35',
    marginLeft: 8,
  },
  featureRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  badge: {
    backgroundColor: '#ff6b35',
    borderRadius: 10,
    paddingHorizontal: 6,
    paddingVertical: 2,
    marginRight: 8,
  },
  badgeText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: 'bold',
  },
  featureDescription: {
    fontSize: 14,
    color: '#999',
    marginRight: 8,
  },
  arrowIcon: {
    width: 16,
    height: 16,
    color: '#ccc',
  },
});

export default MySreen;
